<template>
	<div>
		<el-button type="success" @click="add()">添加</el-button>
		<hr />



		<el-table :data="tableData" style="width: 100%">

			<el-table-column prop="key" label="key" width="180">
			</el-table-column>
			<el-table-column prop="name" label="频道的名字">
			</el-table-column>
			<el-table-column prop="weight" label="排序">
			</el-table-column>
			
			<el-table-column label="操作">
				 <template slot-scope="scope">
					<el-button type="text" size="small" @click="edit(scope.row.id)">编辑</el-button>
					<el-button type="text" size="small" @click="del(scope.row.id)">删除</el-button>
				  </template>
			</el-table-column>
		</el-table>


		<el-dialog title="频道编辑" :visible.sync="dialogVisible" width="800px" :close-on-click-modal="false"
			:close-on-press-escape="false">
			
			<edit @update="update" v-if="dialogVisible" :id="id"></edit>

		</el-dialog>


	</div>
</template>

<script>
	//
	import axios from  'axios';
	import edit from './edit.vue';
	export default {
		name: 'ChannelList',
		components:{
			edit
		},
		data() {
			return {
				dialogVisible: false,
				id:null,
				form: {
					name: '',
					address: ''
				},
				tableData: []
			}
		},
		methods: {
			update(){
				//关闭对话框
				this.dialogVisible = false;
				//重新查询
				this.list()
			},
			add(){
				this.dialogVisible=true
				this.id=null;//将上一次更新的 id 清空
			},
			edit(id){
				// alert(id);
				this.id=id
				this.dialogVisible = true
			},
			del(id){
				alert("delete")
				axios.get('/api/channel?_type=delete',{
					params:{
						id:id
					}
				}).then(()=>{
					alert("then");
					this.list();
				})
			},
			//查询列表的功能
			list(){
				// http://192.168.3.3/api/channel 
				axios.get('/api/channel?_type=list').
				then((ret)=>{
					//网络成功
					// console.log(ret);
					//解析数据
					if(ret.status == 200){ //网络请求是通的，axios的状态
						let response = ret.data;//响应结果
						let {code ,msg ,data} = response;
						if(code == 200){
							console.log("data:",data);
							this.tableData = data;
						}else{
							alert("出错了:"+msg)
						}
					}
					
				})
				
				//console.log(axios);
			}
		},
		//当组件呗创建了 就调用查询列表的功能
		created(){
			this.list();
			
			
		}
	}
</script>

<style>
</style>
